<template>
	<view class="search-bar">
		<view class="search-label">{{labelText}}</view>
		<view class="search-content">
			<!-- <icon type="search" size="16"/> -->
			<uni-icons type="search" size="16"></uni-icons>
			<text @click="showPkPicker" style="padding-right: 30px;">{{query.outletName || '请选择排口'}}</text>
			<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/>
		</view>
		<view class="search-btn" @click="handleSearch">查询</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	export default {
		components: {uniIcons},
		props:{
			labelText: {
				type: String,
				default: '排口'
			}
		},
		data() {
			return {
				queryStr: '',
				query: {
					outletId: '',
					outletName: ''
				}
			}
		},
		methods: {
			handleSearch(){
				this.$emit('onSearch',this.queryStr)
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				console.log(e)
				if(e.length > 0){
					const {id,name} = e[0]
					this.query.outletId = id
					this.query.outletName = name
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-bar{
		display: flex;
		background-color: #fff;
		align-items: center;
		height: 80upx;
		.search-label{
			flex: 0 0 120upx;
			text-align: center;
			color: #868686;
			font-size: 26upx;
		}
		.search-content{
			flex: 1;
			background: #f5f5f5;
			border-radius: 20upx;
			height: 60upx;
			line-height: 60upx;
			display: flex;
			align-items: center;
			padding: 0upx 20upx;
			.ipt{
				font-size: 26upx;
				padding-left: 10upx;
				flex:1;
				height: 60upx;
				line-height: 60upx;
			}
		}
		.search-btn{
			flex: 0 0 100upx;
			text-align: center;
			color: #1b70ae;
		}
	}
</style>
